<swal title="Delete?"
      [text]="'Client grant type \'' + grantTypeToDelete?.type + '\' will be deleted permanently. This action cannot be reversed.'"
      type="warning"
      [showCancelButton]="true"
      (confirm)="delete()"
      #deleteAlert>
</swal>
<p class="mt-3"
   *ngIf="!client">
    Loading client grant types...
</p>
<form class="needs-validation mt-3"
      *ngIf="client"
      [ngClass]="{ 'was-validated': grantTypesform.submitted }"
      (ngSubmit)="grantTypesform.form.valid && addGrantType()"
      novalidate
      #grantTypesform="ngForm">
    <div class="form-row">
        <div class="col">
            <label class="sr-only"
                   for="grant-type">
                Grant Type
            </label>
            <select class="form-control custom-select"
                    id="grant-type"
                    name="grant-type"
                    [(ngModel)]="selectedGrantType"
                    required
                    #grantType="ngModel">
                <option value=""
                        disabled>
                    Please select a suitable grant type
                </option>
                <option *ngFor="let grantType of availableGrantTypes"
                        [value]="grantType"
                        [disabled]="!canAddGrantType(grantType)">
                    {{ grantType }}
                </option>
                <option value="custom">custom</option>
            </select>
            <div *ngIf="grantTypesform.submitted && grantType.invalid"
                 class="form-control-feedback text-danger">
                Please select a value.
            </div>
        </div>
        <div class="col" *ngIf="selectedGrantType === 'custom'">
            <label class="sr-only"
                   for="claim-value">
                Value
            </label>
            <input class="form-control"
                   id="claim-value"
                   name="claim-value"
                   [(ngModel)]="customGrantName"
                   [placeholder]="'Please provide a value...'"
                   type="text"
                   required
                   #value="ngModel" />
            <div *ngIf="grantTypesform.submitted && value.invalid"
                 class="form-control-feedback text-danger">
                Please provide a value.
            </div>
        </div>
        <div class="col-md-1 text-right">
            <button type="submit"
                    class="btn btn-primary waves-effect waves-light m-r-5">
                Add
            </button>
        </div>
    </div>
</form>
<div class="row mt-3">
    <div class="col-12">
        <app-list-view [clientSide]="true"
                       [rowsPerPage]="10"
                       [canFilter]="false"
                       [columns]="columns"
                       [rows]="rows"
                       [defaultSortField]="'type'"
                       [defaultSortDirection]="'Asc'"
                       #grantTypesList>
        </app-list-view>
    </div>
</div>
<ng-template let-row="row"
             let-value="value"
             #actionsTemplate>
    <button class="btn btn-danger"
            (click)="showDeleteAlert(value)">Delete</button>
</ng-template>